<template>
    <div>
        <header>
            <van-icon name="arrow-left" size="20" @click="back"/>
            <span>个人信息</span>
            <van-icon name="calender-o" size="20" @click="date()"/>
        </header>
       <div v-if="!isLogin" class="no-login">
      <!-- <Empty :empty_type="{name: '请登录后查看相关内容'}"></Empty> -->
      <div class="info" @click="onLogin">登录/注册</div>
    </div>
    <div v-else>
      <van-tabs @change="onTabChange">
        <van-tab v-for="(item, index) in tabs" :key="index" :title="`${item.name}(${item.num})`"></van-tab>
      </van-tabs>
      <div v-if="list.length">
        <MyStudyList :courses="list" :userInfo="userInfo" @onRefresh="onRefresh"></MyStudyList>
      </div>
      <div v-else class="no-login">
          <img src="../assets/images/empty.png" alt="">
          <p>还没有课程，快去选择课程学习吧</p>
        <div class="info" @click="onChooseCourse">选择课程</div>
      </div>
    </div>
</van-tabs>
    </div>
</template>

<script>
import { Icon ,Tab, Tabs } from 'vant';
import {Course, userInfo, course} from "../request/api.js"
import MyStudyList from "../views/MyStudyList"
export default {
    components:{
        [Icon.name]:Icon,
        [Tab.name]:Tab,
        [Tabs.name]:Tabs,
        MyStudyList
    },
    data(){
        return{
            tabs: [],
            list: [],
            userInfo: {},
            type: 2,
        }
    },
    created() {
    this.requestCourse()
    this.requestUserInfo()
  },
  computed: {
    isLogin() {
      return !!localStorage.adminToken
    }
  },
  methods: {
    // on event
    onTabChange(index) {
      this.type = this.tabs[index].type
      this.requestCourse()
    },
    date(){
      this.$router.push("studyDate")
    },
    onCalendar() {
      this.$router.push({
        name: 'StudyCalendar'
      })
    },
    onLogin() {
      this.$router.push({
        name: 'Login'
      })
    },
    onChooseCourse() {
      this.$router.push({
        name: 'ke'
      })
    },
    onRefresh() {
      this.requestCourse()
    },
    // other
    // request
    requestCourse() {
      course(this.type).then((res)=>{
          console.log(res.data)
          this.tabs = res.data.typeNum
        this.list = res.data.courseList
      })
    },
    requestUserInfo() {
      userInfo().then(data => {
          console.log(data.data)
        this.userInfo = data.data
      })
    },
    back(){
            this.$router.go(-1)
        }
  }

}
</script>

<style lang="scss" scoped>
 header{
    width:100%;
    border-bottom:1px solid #f4f4f4;
    height:42px;
    display:flex;
    padding-top: 5px;
    background:white;
    .van-icon{
        flex:1;
         text-align:center;
    }
    span{
        flex:3;
        font-size:20px;
        padding-left: 80px;
    }
}
  .no-login {
    text-align: center;
    img{
        width: 150px;
        height: 150px;
        margin-top: 100px;
    }
    p{
        margin-top: 20px;
        color:rgb(177, 174, 174);
        font-size: 18px;
    }
    .info {
      width: 100px;
      height: 30px;
      border-radius: 8px;
      background-color: #ea7a2f;
      font-size: 15px;
      color: #fff;
      line-height: 30px;
      margin: 30px auto;
    }
  }
  .vip {
    font-size: 26px;
    color: #8c8c8c;
    background-color: #fff;
    padding: 30px 20px;
    .date {
      color: #ea7a2f;
    }
    .btn {
      display: inline-block;
      background: #ea7a2f;
      color: #fff;
      padding: 5px 5px;
      border-radius: 5px;
      font-size: 24px;
    }
  }
</style>